<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>核酸检测系统</title>
</head>
<script th:src="@{/js/jquery-3.7.0.js}"></script>
<style>
    .red-row{
        background-color: red!important;
    }

</style>
<body>
<h1 style="text-align: center">核酸检测系统</h1>
<div style="text-align: center;position: relative">
    <form th:action="@{/getMedical}" method="get" style="display: inline-block;">
        <select name="hId" id="sel">
            <option  value="">————请选择————</option>
        </select>
        <input type="submit" value="查询">
    </form>
    <button style="display: inline-block;position:absolute;right: 0" onclick="goAdd()">添加</button>
    <script>
        function goAdd(){
            location.href="http://localhost:8080/add";
        }
    </script>
</div>
<div>
    <table border="1" style="margin: auto">
        <tr>
            <th>被检测人</th>
            <th>被检测人手机号</th>
            <th>被检测人身份证号</th>
            <th>检测机构</th>
            <th>检测日期</th>
            <th>检测结果</th>
            <th>操作</th>
        </tr>
        <tr th:each="item:${list}" th:class="${item.assayResult == 1} ? 'red-row' : ''">
            <td th:text="${item.getAssayUser()}"></td>
            <td th:text="${item.getPhone()}"></td>
            <td th:text="${item.getCardNum()}"></td>
            <td th:text="${item.getHospitalName()}"></td>
            <td th:text="${#dates.format(item.getAssayTime(),'yyyy-MM-dd')}"></td>
            <td th:text="${item.getAssayResult() == 0 ? '诊断中' : (item.getAssayResult() == 1 ? '阳性' : '阴性')}"></td>
            <td>
                <a th:attr="onclick='updateStatus(\'' + ${item.getAssayResult()} + '\', \'' + ${item.getId()} + '\')'" href="javascript:;">确诊</a>
            </td>


            <script>
                function updateStatus(status,id){
                    console.log(status)
                    if (confirm("请问该检测者是否确诊?")){
                        $.ajax({
                            url:"http://localhost:8080/updateStatus/"+status+"/"+id,
                            type:"get",
                            success:function (){
                                window.location.reload();
                            }
                        })
                    }
                }
            </script>
        </tr>
    </table>
</div>
</body>
<script th:inline="javascript">

  $(function (){
      let hId=[[${hId}]]
      let list=[[${list}]]
      $("tr:odd").css("backgroundColor","pink")

      if (list==null) {
          window.location.href = 'http://localhost:8080/getMedical';
      }
      //ajax请求渲染下拉列表
      $.ajax({
          url:"http://localhost:8080/hospital",
          type:"get",
          success:function (data){
              $.each(data,function (index,item){
                  $("#sel").append($('<option>',{
                      value:item.id,
                      text:item.name
                  }))
              });
              $("#sel").val(hId);
          }
      })
  })
</script>
</html>